<template>
	<view>
		

		<scroll-view scroll-y="true" class="cont" :enhanced="true"
         :bounces="false" :show-scrollbar="false">

				 <view class="context">
						<div v-if="isflag">
							<span>请设置时间：</span>
							<span><input v-model="timer"></span>
							<span>s(单位：秒，默认为10秒)</span>
						</div>
						<div v-else="isflag">时间：{{ timerid }}</div>
						<div>{{ timer == '' ? 0 : timer }}s内的点击数：{{ hits }}</div>
						<button class="newbtn" v-if="istest" ref="restart" @click="newbtn">重新开始</button>
						<button class="newbtn" v-else="istest" disabled ref="restart" @click="newbtn">重新开始</button>
				</view>

				<button v-if="istest" disabled class="clibtn">点击进行<br>手速测试</button>
				<button v-else="istest" class="clibtn" v-show="istestvalid"  @click="clibtn"> 点击进行<br>手速测试</button>
       <!-- 主要是用 scroll-view 标签包裹住内容  -->
</scroll-view>

	</view>
</template>

<script>
import { validnum } from '@/utils/validata.js' 
// console.log(validnum(6),99999966)  对实参进行校验 返回 true 或者 false

	export default {
		data() {
			return {
				istestvalid:true,
				// 控制点击测试的显示隐藏
				istest:false,
				// 点击的次数
				hits:0,
				// 计时的时长
				timer:10,
				// 控制显示隐藏
				isflag:true,
				// 计时器的时间
				timerid:0,
				iswatchflag:true,
				id:null
			}
		},
		onLoad() {
			
		},
		watch: {
			// 侦听 iswatchflag
			iswatchflag(newval,oldval){
				// 当 iswatchflag 等于 true 的时候，退出侦听
				if(this.iswatchflag == true) return console.log(666)
				// 定时器
				this.id = setInterval(()=>{
					// console.log(123)
					// 时间 + 1/s
					this.timerid += 1;
					// console.log(222222222)
						// console.log(this.timer)
						
						// 当时间到达 设定好的秒数时，执行
						if(this.timerid== +this.timer){
							// console.log(uni.createSelectorQuery().in(this).select("#id")._component.$el.childNodes,111222333)
							// const distest = uni.createSelectorQuery().in(this).select("#id")._component.$el.childNodes[0]
							// console.log(distest,888)
							// 获取到所有的元素
							// 设置对应元素的 disabled 值
							// arr[0].disabled = true
							
							this.istest = !this.istest
							// 清除定时器
							clearInterval(this.id)
							// 计算 每秒点击了多少下  this.hits / this.timerid
							const end = (+this.hits / +this.timerid).toFixed(1)
							// console.log(this.hits)
							// console.log(this.timerid)
							// console.log(end,666999669)
							// 跟我作比较吧    7下/1s
							if(end <= 1 ){
								// 设置弹窗提示
								uni.showToast({
									title: '啧啧啧,你这速度..🤡',
									icon:'none',
									duration:2500
								});
							} else if(end > 1 && end <=2){
								// 设置弹窗提示
								uni.showToast({
									title: '不是？就这？？🤏',
									icon:'none',
									duration:2500
								});
							} else if(end > 2 && end <=3){
								// 设置弹窗提示
								uni.showToast({
									title: '啊？结束了？这么快？🥺',
									icon:'none',
									duration:2500
								});
							} else if(end > 3 && end <=4){
								// 设置弹窗提示
								uni.showToast({
									title: '加油，还得练呐🤭',
									icon:'none',
									duration:2500
								});
							} else if(end > 4 && end <=5){
								// 设置弹窗提示
								uni.showToast({
									title: '还不够强喔🤗',
									icon:'none',
									duration:2500
								});
							} else if(end > 5 && end <=6){
								// 设置弹窗提示
								uni.showToast({
									title: '终于要达到正常人水准了捏😋',
									icon:'none',
									duration:2500
								});
							} else if(end > 6 && end <=7){
								// 设置弹窗提示
								uni.showToast({
									title: '累不累，辛苦辛苦，休息一下吧！🤞',
									icon:'none',
									duration:2500
								});
							} else if(end > 7 && end <=8){
								// 设置弹窗提示
								uni.showToast({
									title: '很棒很棒，你的手速超乎常人喔🥳',
									icon:'none',
									duration:2500
								});
							} else if(end > 8 && end <=9){
								// 设置弹窗提示
								uni.showToast({
									title: '你是真的顶啊，老铁😻',
									icon:'none',
									duration:2500
								});
							} else if(end > 9 && end <=10){
								// 设置弹窗提示
								uni.showToast({
									title: '咳！你单身多久了？🤤',
									icon:'none',
									duration:2500
								});
							} else {
								// 设置弹窗提示
								uni.showToast({
									title: '不是，你开挂了？？😧',
									icon:'none',
									duration:2500
								});
							}
							console.log(end,999999)
							this.timerid = '时间到'
						}
					},1000);
			},
			// 侦听 timer  发生改变，就校验
			timer(newval,oldval){
				// console.log(newval,999)
				// console.log(validnum)
				const validataNum = validnum(newval)
				// console.log(validataNum,999)   若是为正整数，就是 true   否则为 false
				if(validataNum == true){
					// 校验通过  显示 点击的按钮
					this.istestvalid = true
				} else {
					if(newval == 0){
						// 当输入框的值 等于 0的时候，就显示
						return this.istestvalid = true
					}
					// 校验不通过 就不显示 点击的按钮
					this.istestvalid = false
					// 设置弹窗提示
					uni.showToast({
						title: '请重新填写数字',
						icon:'error',
						duration:850
					});
					// 将输入的文本变为默认值
					this.timer = 10
				}
			}
		},
		methods: {
			// 点击测试的 次数
			clibtn(){
				// 打印输出  button按钮的 disabled 属性
				// console.log(this.$refs.test.disabled)

				if(this.iswatchflag != false){
					// 让侦听器监听的数据发生变化，执行里面的代码
				this.iswatchflag = false
				this.isflag = false
				}
				// 点击次数 + 1
				this.hits += 1
			},
			// 点击重新开始
			newbtn(){
				this.hits = 0
				this.isflag = true
				this.timerid = +0
				// this.$refs.test.disabled = false
				// console.log(this.id)
				clearInterval(this.id)
				this.istest = !this.istest
							this.iswatchflag = true
			}
		},
		// 分享页面给朋友
		onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
    }
    return {
        title: '我的手速嘎嘎快', //分享的名称
        path: 'pages/index/index',
        mpId:'wx8b08d09b5eab5969' //此处配置微信小程序的AppId
    }
},
		//分享到朋友圈
		onShareTimeline(res) {
				return {
						title: this.hits == 0 ? '论手速没服过谁，不服来战！' : `不好意思，在下手速${this.timer}秒内可以点${this.hits}下，不是我吹，在座各位，都是渣渣`,
						type: 0,
						summary: "",
				}
		},

	}
</script>

<style>
	.context{
		margin-top: 10vh;
	}

	.clibtn{
		margin-top: 10vh;
		width: 60vw;
		height: auto;
		text-align: center;
		background-color: yellow;
		font-weight: 700;
		font-size: 10vw ;
		white-space: normal;
	}

	div{
		text-align: center;
		margin-top: 2vh;
		margin-bottom: 2vh;
	}

	.newbtn{
		width: 60vw;
		height: 10vh;
		text-align: center;
		line-height: 10vh;
		background-color: aqua;
	}

	span{
		display: inline-block;;
	}

	input{
		width: 2em;
		border-radius: 1em;
		border-color: yellowgreen;
		border: 1px solid rgb(228, 80, 80);
	}

	button{
		border-radius: 10vw;
	}

	.cont{
		width: 100vw;
		height: 100%;
	}
</style>
